<script>
import CountTo from 'vue-count-to'

export default {
  name: 'SocialInsurance',
  components: { CountTo }
}
</script>

<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>社保申报数据</span>
    </div>
    <div class="body">
      <h1>申报人数</h1>
      <div class="info">
        <ul>
          <li>
            <span class="text">待申报(人)</span>
            <span class="count">
                <CountTo :srat-val="0" :end-val="14" :duration="1500"></CountTo>
            </span>
          </li>
          <li>
            <span class="text">申报中(人)</span>
            <span class="count">
                <CountTo :srat-val="0" :end-val="150" :duration="1500"></CountTo>
            </span>
          </li>
          <li>
            <span class="text">已申报(人)</span>
            <span class="count">
                <CountTo :srat-val="0" :end-val="10" :duration="1500"></CountTo>
            </span>
          </li>
        </ul>
      </div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.el-card {
  height: 95%;
  .body {
    h1 {
      font-size: 16px;
    }

    .info {
      display: flex;
      justify-content: center;

      ul {
        display: flex;
        flex-direction: column;

        li {
          display: flex;
          margin: 10px 0;

          .text {
            font-size: 16px;

          }

          .count {
            font-size: 20px;
            margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>
